<template>
	<view class="content_warp">
		<Bar :scroll="scroll">
			<view class="header_top">
				<u-icon name="map" :color=" scroll >40  ? '#000' : '#fff'" size="20"></u-icon>
				<text :style="scroll >40  ? 'color:#000;' : 'color:#fff;' ">{{locationName}}</text>
				<u-icon name="arrow-down-fill" :color=" scroll >40  ? '#000' : '#fff'" size="12"></u-icon>
			</view>
		</Bar>
		<view class="banner">
			<view class="search_warp" :style="{paddingTop:(statusBarHeight+navHeight)+ 'px'}">
				<view class="search">
					<view class="search_l_warp">
						<u-icon name="search" color="#333333" size="23"></u-icon>
						<input type="text" disabled placeholder="搜索组团类型" />
					</view>
					<view class="scancode">
						<image src="/static/index/smtb.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 	<image src="@/static/index/banner.png" mode="widthFix"></image> -->
		</view>
		<view class="operate_warp">
			<ul>
				<li>
					<view class="item_l_warp">
						<view class="item_l_name">
							摄影团
						</view>
						<view class="item_l_description">
							聚焦此刻，让美好触手可及
						</view>
					</view>
					<view class="item_r_warp">
						<image src="/static/index/syt1.png" mode=""></image>
					</view>
				</li>
				<li>
					<view class="item_l_warp">
						<view class="item_l_name">
							景点团
						</view>
						<view class="item_l_description">
							探索奇妙的自然风光
						</view>
					</view>
					<view class="item_r_warp">
						<image src="/static/index/jdt.png" mode=""></image>
					</view>
				</li>
			</ul>
		</view>

		<view class="tab">
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<image :src="item.icon" mode=""></image>
					<text>{{item.name}}</text>
				</li>
			</ul>
		</view>
		
		<view class="list">
			<ul>
				<li v-for="(item,index) in 4" :key="index">
					<!-- <image src="" mode=""></image> -->
				</li>
			</ul>
		</view>
		<tab-bar :index="0" />
	</view>
</template>

<script>
	const app = getApp()
	import Bar from '@/components/bar/index.vue'
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				navHeight: app.globalData.navHeight,
				locationName: "北京",
				scroll: 0,
				list: [{ 
						name: "自驾团",
						icon: "../../static/index/zjttb.png" 
					},
					{
						name: "娱乐团",
						icon: "../../static/index/ylttb.png"
					},
					{
						name: "深入游团",
						icon: "../../static/index/srytb.png"
					},
					{
						name: "当地向导团",
						icon: "../../static/index/dixdb.png"
					},
					{
						name: "兴趣团",
						icon: "../../static/index/xqb.png"
					},
					{
						name: "话题团",
						icon: "../../static/index/htb.png"
					},
					{
						name: "高端局",
						icon: "../../static/index/gdb.png"
					},
					{
						name: "高端度假",
						icon: "../../static/index/tjtbb.png"
					},
				]
			}
		},
		components: {
			Bar
		},
		onPageScroll(e) {
			this.scroll = e.scrollTop
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F4F4F4;
	}
	@import './index.scss';
</style>